import React from "react";
import { Collapse, List ,SwipeAction, Toast,Modal} from "antd-mobile";
import { Icon } from 'antd';
const genExtra = () => (
  <Icon
    type="setting"
    onClick={event => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }}
  />
);

class TreesMenu extends React.Component {
  render() {
    let datas = this.props.datas;
    console.log(this.props)
    return (
      <div>
        {datas instanceof Array ? (
          <div>
            {datas.map((d, index) => {
              return <TreeNode datas={d} key={d.id} 
              
              clickOnAdd={(data)=>{this.props.clickOnAdd(data)}}
              clickOnEdit={(data)=>{this.props.clickOnEdit(data)}}
              clickOnDelete={(data)=>{this.props.clickOnDelete(data)}}
              onselected={(item) => this.props.onselected(item)}></TreeNode>;
            })}
          </div>
        ) : (
          <div>请传入正确格式</div>
        )}
      </div>
    );
  }
}

export default TreesMenu;

class TreeNode extends React.Component {
  
  render() {
    let data = this.props.datas;
    return data && (!data.children || data.children.length === 0) ? (
      <div>
        <List className="my-list" onClick={() => {
            this.props.onselected(data)
        }}>
           <SwipeAction
                        key={data.id}
                        rightActions={[
                            {
                                key: 'edit',
                                text: '编辑',
                                color: 'primary',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnEdit(data)
                              },
                              {
                                key: 'add',
                                text: '添加',
                                color: 'warning',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnAdd(data.id)
                              },
                           
                            {
                              key: 'delete',
                              text: '删除',
                              color: 'danger',
                              onClick:()=> {Modal.confirm({
                                content: '是否删除笔记类别',
                                onConfirm: async () => {
                                  await this.props.clickOnDelete(data.id)
                                  Toast.show({
                                    icon: 'success',
                                    content: '提交成功',
                                    position: 'bottom',
                                  })
                                },
                            })}
                            }
                            ,                       
                          ]}
                        >
          <List.Item>{data.title}</List.Item>
          </SwipeAction>
        </List>
      </div>
    ) : (
      <div>
        <SwipeAction
                        key={data.id}
                        leftActions={[
                            {
                                key: 'edit',
                                text: '编辑',
                                color: 'primary',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnEdit(data)
                              },
                              {
                                key: 'add',
                                text: '添加',
                                color: 'warning',
                                // onClick:()=>{this.props.history.push({ pathname: "/note/"+PRIVATE_ROUTE.APP_OA_NOTE_EDIT, state:{id:item.id}  });}
                                onClick:()=>this.props.clickOnAdd(data.id)
                              },
                           
                            {
                              key: 'delete',
                              text: '删除',
                              color: 'danger',
                              onClick:()=> {Modal.confirm({
                                content: '是否删除笔记类别',
                                onConfirm: async () => {
                                  await this.props.clickOnDelete(data.id)
                                  Toast.show({
                                    icon: 'success',
                                    content: '提交成功',
                                    position: 'bottom',
                                  })
                                },
                            })}
                            }
                            ,                       
                          ]}
                        >
        <Collapse>
        
          <Collapse.Panel title={data.title} key={data.id} forceRender='true'  className="tree-accordion-panel"  >
            {data && data.children && data.children.map(item=> {
            return <TreeNode datas={item}  key={item.id}
            clickOnAdd={(data)=>{this.props.clickOnAdd(data)}}
              clickOnEdit={(data)=>{this.props.clickOnEdit(data)}}
              clickOnDelete={(data)=>{this.props.clickOnDelete(data)}}
              ></TreeNode>;
            })}
         
          </Collapse.Panel>
          
        </Collapse>
        </SwipeAction>
      </div>
    );
  }
}

